<template>
  <el-container>
    <aside-layout></aside-layout>
    <el-main>
      <div class="page-container">
        <h1><i class="el-icon-s-tools"></i> 服务项目管理</h1>
        <el-form :inline="true" :model="filterData" class="filter-form">
          <el-form-item label="服务类型">
            <el-select v-model="filterData.type" placeholder="请选择服务类型">
              <el-option label="全部" value=""></el-option>
              <el-option label="护理" value="nursing"></el-option>
              <el-option label="清洁" value="cleaning"></el-option>
              <el-option label="餐饮" value="dining"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="filterServices">筛选</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="filteredServices" style="width: 100%">
          <el-table-column prop="name" label="服务名称" width="200" />
          <el-table-column prop="type" label="类型" width="150" />
          <el-table-column prop="price" label="价格" width="100" />
          <el-table-column prop="description" label="描述" />
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button size="small" type="success" @click="editService">编辑</el-button>
              <el-button size="small" type="danger" @click="deleteService(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import AsideLayout from '@/layout/asideLayout.vue';

export default {
  name: 'ServiceItems',
  components: {
    AsideLayout
  },
  data() {
    return {
      filterData: {
        type: ''
      },
      services: [
        { name: '基础护理', type: 'nursing', price: '¥200', description: '提供基础护理服务' },
        { name: '房间清洁', type: 'cleaning', price: '¥100', description: '每日房间清洁' },
        { name: '营养餐', type: 'dining', price: '¥50', description: '提供营养餐饮服务' },
        // 更多服务项目可以在这里添加
      ],
      filteredServices: []
    };
  },
  mounted() {
    this.filteredServices = this.services;
  },
  methods: {
    filterServices() {
      this.filteredServices = this.services.filter(service => {
        return !this.filterData.type || service.type === this.filterData.type;
      });
    },
    editService() {
      this.$message.success('编辑功能待实现');
    },
    deleteService(index) {
      this.filteredServices.splice(index, 1);
      this.$message.error('服务项目已删除');
    }
  }
};
</script>

<style scoped>
.page-container {
  padding: 20px;
}

.filter-form {
  margin-bottom: 20px;
}
</style> 